<!-- 修改个人资料 -->
<template>
	<view class="edit">
		<view class="edit_content">
			<!-- 修改头像 -->
			<view class="head">
				<view class="circle" @click="editHead">
					<img :src="info.pic_url" />
				</view>
				<view class="head_name" @click="editHead">修改头像</view>
			</view>
			<!-- 信息 -->
			<view class="part">
				<p>昵称</p>
				<input :value="info.name" @input="nameInput($event)" type="text" placeholder='请输入昵称'>
			</view>
			<view class="part">
				<p>性别</p>
				<picker @change="bindPickerChange" :value="index" :range="gender">
					<view class="choose_birthday">
						<input :value="info.sex" maxlength="2" type="text" disabled="disabled" placeholder='请选择性别'>
						<img :src="arrow_right" />
					</view>
				</picker>
			</view>
			<view class="part">
				<p>出生年月</p>
				<view class="choose_birthday" @click="show">
					<input :value="info.birthday" type="text" disabled="disabled" placeholder='请选择出生年月'>
					<img :src="arrow_right" />
				</view>
			</view>
			<!-- 保存 -->
			<view class="button" @tap="save">
				<btn :title="btn"></btn>
			</view>
			<!-- 选择出生日期 -->
			<picker-date ref="pickerDate" @sure="sure"></picker-date>
			<!-- 让父标签 0宽 0高 隐藏溢出 -->
			<view style="width:0rpx;height:0rpx; overflow:hidden">
				<canvas id="canvas"></canvas>
			</view>
			<view class="finish_box pa" v-if="finish_status">
				<view class="card pa">
					<view class="name x-c">积分任务</view>
					<view class="text x-c">积分任务完成成功，是否前往积分任务列表</view>
					<view class="btn x-ac">
						<view class="cancel" @click="cancel">取消</view>
						<view class="finally" @click="finall">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import btn from '../../components/btn/index.vue'
	import mixins from '@/common/mixins.js';
	export default {
		mixins: [mixins],
		components: {
			btn
		},
		data() {
			return {
				addressUrl: '/pages/user/info/address/index',
				index: 0, // 下标
				gender_status: 0, // 性别索引
				gender: ['男', '女', '保密'], // 性别数组
				info: { // 输入框信息
					sex: '',
					name: '',
					birthday: '',
				},
				btn: '保存', // 保存按钮
				arrow_right: this.imgUrl + 'arrow_right.png', // 右箭头
				obj: { // 修改提交参数
					member_id: 1,
					nickname: '',
					gender: 0,
					birthday: '',
					image: ''
				},
				headImg: '', // 头像
				finish_status: false // 积分任务完成状态
			};
		},
		computed: {
			...mapState({
				user: state => state.user.user,
				address: state => state.address.selected,
				userinfo: state => state.address.list,
			}),
		},
		// 生命周期函數， 当数据发生改变时被触发的 
		methods: {
			// 取消
			cancel() {
				this.finish_status = false;
				this.$store.dispatch('init/get_tabbarActive', 4);
				this.$Router.replace({
					path: '/pages/home_index/home_index'
				})
			},
			// 完成
			finall() {
				this.$Router.push({
					path: '/pages/user/score/task/index'
				})
			},
			// 保存
			save() {
				if (!this.info.name.length) {
					this.$tools.toast('请输入昵称')
					return
				}
				if (!this.info.sex.length) {
					this.$tools.toast('请选择性别')
					return
				}
				if (!this.info.birthday.length) {
					this.$tools.toast('请选择出生日期')
					return
				}
				this.obj.nickname = this.info.name
				this.obj.birthday = this.info.birthday.replace(/-/g, "");
				this.obj.gender = this.info.sex
				if (this.obj.gender == '男') {
					this.obj.gender = 0
				} else {
					this.obj.gender = 1
				}
				this.$api('memberupdateInfo', this.obj).then(res => {
					this.$tools.toast('保存成功')
					// 更新用户提交信息
					this.$api('memberinfo').then(res=> {
						this.$store.dispatch('user/get_user',res.data)
					})
					if (res.data.finish_task) {
						this.finish_status = true
					} else {
						setTimeout(()=> {
							this.$store.dispatch('init/get_tabbarActive', 4);
							this.$Router.replace({
								path: '/pages/home_index/home_index'
							})
						},1000)
					}
				})
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
			nameInput(event) {
				this.info.name = event.detail.value;
			},
			//修改头像
			editHead() {
				// 取到图片路径;
				let that = this;
				that.$tools.chooseImage().then(res => {
					this.headImg = res[0]
					this.info.pic_url = this.headImg
					let imgList = '';
					that.upload(this.headImg)
				})
			},
			//微信上传图片
			upload(tempFilePaths) {
				let that = this;
				let imgList = '';
				that.$tools.getFileSystemManager(tempFilePaths).then(res => {
					imgList = res.data
					this.obj.image = imgList
				})
			},
			bindPickerChange(e) {
				let a = e.target.value;
				this.info.sex = this.gender[a]
			},
			// 显示选择日期器
			show() {
				this.$refs.pickerDate._data.show = true
			},
			// 子组件选择器确定按钮
			sure(val) {
				this.info.birthday = val
			},
		},
		created() {
			this.info.name = this.user.nickname;
			this.info.pic_url = this.user.pic_url;
		}
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
